import React, { Component } from 'react';
import FormItem from "antd/lib/form/FormItem";
import { Col, Input, Row } from "antd";
import styles from "@/pages/user/login/style.less";
import { FormInstance } from "antd/lib/form";
import { MailOutlined, MailTwoTone, MobileTwoTone, UserOutlined } from "@ant-design/icons/lib";


class ImgCaptcha extends Component<IImgCaptchaProps, IImgCaptchaState> {

  constructor(props: IImgCaptchaProps) {
    super(props);
    this.state = {
      imgCaptchaKey: "",
      imgCaptchaCode: "",
      imgCaptchaBase64Data: "",
    }
  }

  componentDidMount() {
    this.init();
  }

  private getImgCaptcha(formInstance: FormInstance): void {
    formInstance.setFieldsValue({imgCaptchaCode: "1", imgCaptchaKey: "2"})
  }

  private init() {
    this.setState({
      imgCaptchaKey: "123",
      imgCaptchaBase64Data: "",
    });
  }


  render() {
    return (
      <FormItem shouldUpdate>
        {(formInstance: FormInstance) => (
          <Row gutter={8}>
            <Col span={14}>
              <FormItem name="imgCaptchaCode" initialValue={this.state.imgCaptchaCode}>
                <Input prefix={<MailTwoTone className={styles.prefixIcon}/>} size="large"/>
              </FormItem>
              <FormItem name="imgCaptchaKey" initialValue={this.state.imgCaptchaKey} style={{display: "none"}}>
                <Input/>
              </FormItem>
            </Col>
            <Col span={10}>
              <img src={this.state.imgCaptchaBase64Data} alt="" className={styles.getImgCaptcha}
                   onClick={() => this.getImgCaptcha(formInstance)}/>
            </Col>
          </Row>
        )}
      </FormItem>
    );
  }

}

interface IImgCaptchaProps {

}

interface IImgCaptchaState {
  imgCaptchaKey: string
  imgCaptchaCode: string
  imgCaptchaBase64Data: string
}

export default ImgCaptcha
